<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        height: 100px;
        width: 100px;
        background-color: aliceblue;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<!-- Vue 提供了 <Transition> 和 <TransitionGroup> 组件来处理元素进入、离开和列表顺序变化的过渡效果  -->

<body>
<div id="app"></div>
</body>
<script src="js/vue.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                msg: "vue动画",
                isShow: false,

            }
        },
        methods: {
            // 在元素被插入到 DOM 之前被调用
            // 用这个来设置元素的 "enter-from" 状态
            onBeforeEnter(el) {
                console.log(el);    // 输出 dom 对

                el.style.borderRadius = "0%";
            },

            // 在元素被插入到 DOM 之后的下一帧被调用
            // 用这个来开始进入动画
            onEnter(el, done) {

                // 增加动画
                const intervalId = setInterval( () => {
                    const radius = el.style.borderRadius;   // 获取属性
                    if (radius === '0%') {
                        el.style.borderRadius = "50%";
                    } else {
                        el.style.borderRadius = "0%";
                    }
                }, 1000);

                // 调用回调函数 done 表示过渡结束，如果与 CSS 结合使用，则这个回调是可选参数
                setTimeout( () => {
                    clearInterval(intervalId);  // 清除定时器
                    done(); // 调用动画完成
                }, 3000)

            },

            // 当进入过渡完成时调用。
            onAfterEnter(el) {

            },
            onEnterCancelled(el) {
            },

            // 在 leave 钩子之前调用
            // 大多数时候，你应该只会用到 leave 钩子
            onBeforeLeave(el) {
            },

            // 在离开过渡开始时调用
            // 用这个来开始离开动画
            onLeave(el, done) {
                // 调用回调函数 done 表示过渡结束
                // 如果与 CSS 结合使用，则这个回调是可选参数
                done();
            },

            // 在离开过渡完成、
            // 且元素已从 DOM 中移除时调用
            onAfterLeave(el) {
            },

            // 仅在 v-show 过渡中可用
            onLeaveCancelled(el) {
            }
        },
        /*
            :css="false" // 可以设置 样式不生效
        */
        template: `
          <div>
          <!-- 这里增加一个 name 属性，就可以脱离通用的控制 -->
          <transition :css="false"
                      @before-enter="onBeforeEnter"
                      @enter="onEnter"
                      @after-enter="onAfterEnter"
                      @enter-cancelled="onEnterCancelled"
                      @before-leave="onBeforeLeave"
                      @leave="onLeave"
                      @after-leave="onAfterLeave"
                      @leave-cancelled="onLeaveCancelled">
            <div class="box" v-show="isShow">{{ msg }}</div>
          </transition>

          <button @click="isShow = !isShow">显示与隐藏</button>
          </div>
        `

    }).mount("#app");
</script>

</html>
